<template>
  <PublicPage pageName="设置" :showNav="true">
    <view class="mySetting">
      <view class="itemBox">
        <view class="linh-48 px32 fw6 fz-16">主页设置</view>
        <view
          class="linh-48 px32 justify-between items-center"
          @click="_goPage('/pagesB/personalCenter/editPersonalM?userType=1')"
        >
          <view class="label">速速团账号</view>
          <view class="viceColor">
            <u-icon name="arrow-right" color="#969799" />
          </view>
        </view>
        <view
          class="linh-48 px32 justify-between items-center"
          @click="_goPage('/pagesB/personalCenter/editPersonalM?userType=2')"
        >
          <view class="label">个人资料</view>
          <view class="viceColor">
            <u-icon name="arrow-right" color="#969799" />
          </view>
        </view>
      </view>
      <view class="itemBox">
        <view class="linh-48 px32 fw6 fz-16">地址管理</view>
        <!-- <view class="linh-48 px32 justify-between items-center" @click="_goPage('/pagesB/mySetting/watermark')">
          <view class="label">图片水印</view>
          <view class="viceColor">
            <u-icon name="arrow-right" />
          </view>
        </view> -->
        <!-- <view class="linh-48 px32 justify-between items-center">
          <view class="label">订阅通知</view>
          <view class="viceColor">
            <u-icon name="arrow-right" />
          </view>
        </view> -->
        <view
          class="linh-48 px32 justify-between items-center"
          @click="_goPage('/pagesB/addressLibrary/index')"
        >
          <view class="label">收货地址</view>
          <view class="viceColor">
            <u-icon name="arrow-right" color="#969799" />
          </view>
        </view>
        <view
          class="linh-48 px32 justify-between items-center"
          @click="_goPage('/pagesB/addressLibrary/index?userType=seller')"
        >
          <view class="label">退货地址</view>
          <view class="viceColor">
            <u-icon name="arrow-right" color="#969799" />
          </view>
        </view>
      </view>

      <view class="itemBox">
        <view class="linh-48 px32 fw6 fz-16">二维码海报</view>
        <!-- <view class="linh-48 px32 justify-between items-center">
          <view class="label">主页小程序码</view>
          <view class="viceColor" @click="_shareHome()">
            <text>用户扫码进主页</text>
            <u-icon name="arrow-right" />
          </view>
        </view> -->
        <view class="linh-48 px32 justify-between items-center">
          <view class="label">物流查询码</view>
          <view class="viceColor" @click="_shareLogist()">
            <text class="u-p-r-10">用户扫码查询物流</text>
            <u-icon name="arrow-right" color="#969799" />
          </view>
        </view>
        <view class="linh-48 px32 justify-between items-center">
          <view class="label">专属关注海报</view>
          <view class="viceColor" @click="_shareHome(shareInfoData.accountId)">
            <text class="u-p-r-10">用户扫码关注</text>
            <u-icon name="arrow-right" color="#969799" />
          </view>
        </view>
        <view class="linh-48 px32 justify-between items-center">
          <view class="label">邀请帮卖码</view>
          <view class="viceColor" @click="_shareHelp()">
            <text class="u-p-r-10">邀请更多团长帮卖</text>
            <u-icon name="arrow-right" color="#969799" />
          </view>
        </view>
      </view>

      <view class="itemBox">
        <view class="linh-48 px32 fw6 fz-16">其他</view>
        <button
          class="linh-48 px32 justify-between items-center"
          open-type="contact"
        >
          <view class="label fz-14">体验反馈</view>
          <view class="viceColor fz-14">
            <u-icon name="arrow-right" color="#969799" />
          </view>
        </button>
      </view>

      <view class="tc fz-12 viceColor linh-50" v-if="baseConfig.versionNumber">版本 {{baseConfig.versionNumber}}</view>
    </view>

    <HomepagePoster ref="shareHome" @posterShareSuccess="_homeShareSuccess" />
    <HelpSellPosters ref="shareHelp" @posterShareSuccess="_homeShareSuccess" />
    <QueryLogisticsShare ref="shareLogist" @posterShareSuccess="_homeShareSuccess" />
    <!-- 保存到相册 -->
    <cover-view
      class="fixed_box"
      v-if="homeShareShow"
      @click.stop="homeShareShow = false"
    >
      <cover-view class="poster_publicPopup" @click.stop="">
        <cover-image
          :class="isLoca ? 'poster_share_img2' : 'poster_share_img'"
          mode="aspectFill"
          :src="homeShareData.url"
        />
        <cover-view
          class="keep_btn_box"
          @click.stop="_homeSaveImgFn"
          hover-class="hover"
          >保存到相册</cover-view
        >
      </cover-view>
    </cover-view>
  </PublicPage>
</template>

<script>
import baseConfig from "@/utils/request/baseConfig";
import PublicPage from "@/components/publicPage/index.vue";
import HomepagePoster from "@/components/shareImage/homepagePoster.vue";
import HelpSellPosters from "@/components/shareImage/helpSellPosters.vue";
import QueryLogisticsShare from "@/components/shareImage/queryLogisticsShare.vue";
import share from "@/api/share.js"
import Util from "@/api/util.js";

export default {
  components: {
    PublicPage,
    HomepagePoster,
    HelpSellPosters,
    QueryLogisticsShare,
  },
  data() {
    return {
      shareInfoData: {}, // 分享对象
      homeShareShow: false,
      homeShareData: {},
      isLoca: false, // 是否为分享物流
      baseConfig: {}, // 配置信息
    };
  },
  onLoad(){
    this.baseConfig = baseConfig
    share.getShareInfo({}).then(res => { 
      this.shareInfoData = res.data
    })
  },
  methods: {
    _goPage(url) {
      this.navigateTo({ url });
    },
    playvolumeFn (mun) {
      return Util.playvolume(mun)
    },
    // 主页分享 || 个人主页分享
    _shareHome(accountId) {
      this.isLoca = false
      let canvasData = {
        bgImgUrl: this.shareInfoData.backgroundUrl || "https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/bgImg/user_bg_img.png", // 封面大图片
        page: accountId ? `pagesB/personalCenter/homePage` : "pages/index/index", // 二维码地址
        options: {
          accountId,
          shareType: true
        },
        userAvatar: this.shareInfoData.communityLogo || this.$store.state.userInfo.communityLogo, // 团长头像
        userNickname: this.shareInfoData.communityName || this.$store.state.userInfo.communityName, // 名字
        fansMun: this.playvolumeFn(this.shareInfoData.fansCount || 0),
        fansText: "粉丝数",
        highQualityMun: accountId ? this.shareInfoData.dynamicCount : this.shareInfoData.headCount,
        highQualityText: accountId ? "视频数" : "帮卖团长",
        watchMun: this.playvolumeFn(this.shareInfoData.browseCount || 0),
        watchText: accountId ? "观看人次" : "曝光量",
        codeText1: accountId ? "快来关注TA的个人主页，" : "长按识别关注，和我一起省钱+赚钱", // 二维码提示文案1
      };
      if(accountId){
        canvasData.codeText2 = "TA的视频都在这里，太精彩了。"
      }
      this.$refs.shareHome.sharePosterFrends(canvasData);
    },
    // 邀请成为帮卖 start
    _shareHelp(){
      this.isLoca = false
      let canvasData = {
        page: "pagesB/personalCenter/homePage", // 二维码地址
        options: {
          accountId: this.shareInfoData.accountId,
          applyForHelp: true,
          shareType: true,
        },
        userAvatar: this.shareInfoData.communityLogo || this.$store.state.userInfo.communityLogo, // 团长头像
        userNickname: this.shareInfoData.communityName || this.$store.state.userInfo.communityName, // 名字
        text1: '邀请你成为我的帮卖团长',
        fansMun: this.playvolumeFn(this.shareInfoData.fansCount || 0),
        fansText: "粉丝数",
        followGroupMun: this.playvolumeFn(this.shareInfoData.followGroupCount || 0),
        followGroupText: '跟团人次', // 跟团人次
        btnText: '货源都给你，轻松赚佣金！', // 按钮文案
        tipsText: '长按识别二维码 立即加入', // 提示文案
      };
      this.$refs.shareHelp.sharePosterFrends(canvasData);
    },
    // 查看物流
    _shareLogist(){
      this.isLoca = true
      let canvasData = {
        page: "pages/order/index", // 二维码地址
        options: {},
        userAvatar: this.shareInfoData.communityLogo || this.$store.state.userInfo.communityLogo, // 团长头像
        userNickname: this.shareInfoData.communityName || this.$store.state.userInfo.communityName, // 名字
      }
      this.$refs.shareLogist.sharePosterFrends(canvasData);
    },
    _homeShareSuccess(res) {
      if (res.code == 200) {
        this.homeShareData = res;
        this.homeShareShow = true;
      }
    },
    _homeSaveImgFn() {
      let this_ = this;
      wx.saveImageToPhotosAlbum({
        filePath: this_.homeShareData.url,
        success: function (res) {
          wx.showToast({
            title: "保存成功",
            duration: 1000,
          });
          this_.homeShareShow = false
        },
        fail(err) {
          console.log(err, "errerrerrerr");
          if (
            err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" ||
            err.errMsg === "saveImageToPhotosAlbum:fail auth deny" ||
            err.errMsg === "saveImageToPhotosAlbum:fail authorize no response"
          ) {
            wx.showModal({
              title: "提示",
              content: "需要您授权保存相册",
              showCancel: false,
              success: (modalSuccess) => {
                wx.openSetting({
                  success(settingdata) {
                    console.log("settingdata", settingdata);
                    if (settingdata.authSetting["scope.writePhotosAlbum"]) {
                      wx.showModal({
                        title: "提示",
                        content: "获取权限成功,再次点击图片即可保存",
                        showCancel: false,
                      });
                    } else {
                      wx.showModal({
                        title: "提示",
                        content: "获取权限失败，将无法保存到相册哦~",
                        showCancel: false,
                      });
                    }
                  },
                  fail(failData) {
                    console.log("failData", failData);
                  },
                  complete(finishData) {
                    console.log("finishData", finishData);
                  },
                });
              },
            });
          }
        },
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.mySetting {
  height: 100%;
  .itemBox {
    background-color: #fff;
    .borderTop {
      box-shadow: inset 0px 1px 0px #eeeeee;
    }
    .label {
      color: #323233;
    }
  }
  .itemBox + .itemBox {
    margin-top: 20rpx;
  }
  .fixed_box {
    .groups_share_center {
      background: none;
      width: 520rpx;
      &.share_center_type {
        transform: translate(-50%, -70%);
      }
      .groups_share_text {
        text-align: center;
        font-size: 28rpx;
        color: #fff;
        margin-bottom: 36rpx;
      }
    }
    .groups_share_bt {
      height: 308rpx;
      background: #ffffff;
      border-radius: 40rpx 40rpx 0rpx 0rpx;
      &.groups_share_ios {
        padding-bottom: 60rpx;
      }
      .groups_share_select {
        width: 100%;
        height: 212rpx;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
      .share_friends {
        display: flex;
        flex-direction: column;
        align-items: center;
        .cover_image {
          width: 72rpx;
          height: 72rpx;
          margin-bottom: 12rpx;
        }
        .share_friends_btn_box {
          width: 72rpx;
          height: 72rpx;
          margin-bottom: 12rpx;
        }
      }
      .close_share {
        height: 96rpx;
        background: #ffffff;
        // box-shadow: 0rpx 2rpx 0rpx 0rpx #f2f3f5 inset;
        font-size: 28rpx;
        color: #969799;
        text-align: center;
        line-height: 96rpx;
        // display: flex;
        // justify-content: center;
        // align-items: center;
        &.close_share_ios {
          padding-bottom: 60rpx;
        }
      }
    }
    // 分享预览图
    .share_preview {
      background: #ffffff;
      border-radius: 16rpx;
      padding: 30rpx 20rpx 14rpx;
      &.share_preview_4 {
        width: 260px;
        height: 301px;
        margin: 0 auto 0;
        box-sizing: border-box;
      }
      .share_preview_title {
        width: 480rpx;
        font-size: 24rpx;
        color: #666666;
        display: flex;
        align-items: center;
        .preview_title_img {
          width: 44rpx;
          height: 44rpx;
          border-radius: 50%;
          margin-right: 16rpx;
        }
      }
      .share_preview_content {
        font-size: 32rpx;
        color: #323232;
        white-space: pre-wrap;
        width: 480rpx;
      }
      .share_preview_canvas {
        width: 100%;
        height: 384rpx;
      }
      .share_mini_program {
        display: flex;
        align-items: center;
        // height: 2rpx;
        // border-top: 2rpx solid #dcdee0;
        .mini_program_icon {
          width: 24rpx;
          height: 22rpx;
          margin-right: 8rpx;
        }
      }
      .share_mini_program_border {
        height: 2rpx;
        background-color: #dcdee0;
        width: 100%;
        margin: 20rpx 0;
      }
    }
  }
}
</style>